<template>
  <div class="homepage">
    <header class="top-banner">
      <img src="@/assets/feige.png" alt="背景" class="banner-bg" />
      <div class="banner-content">
        <div class="logo-container">
          <img src="@/assets/zhiyuan.png" alt="网站logo" class="logo" />
          <div class="site-title">青年志愿服务网 CYVA</div>
        </div>
        <div class="search-box">
          <select class="search-type">
            <option value="news">新闻文章</option>
            <option value="volunteer">志愿项目</option>
            <option value="volunteer_team">志愿队伍</option>
          </select>
          <input type="text" placeholder="请输入关键词" class="search-input" />
          <button class="search-btn">搜索</button>
        </div>
      </div>
    </header>
    <nav class="main-nav">
      <ul class="nav-list">
        <li class="nav-item" @click="HomePage">首页</li>
        <li class="nav-item" @click="ProgramView">志愿项目</li>
        <li class="nav-item" @click="TeamView">志愿队伍</li>
        <li class="nav-item">志愿风采</li>
        <li class="nav-item">信息动态</li>
        <li class="nav-item">媒体报道</li>
        <li class="nav-item">研究培训</li>
        <li class="nav-item">政策文件</li>
        <li class="nav-item">通知公告</li>
        <li class="nav-item" @click="LoginView">登录</li>
        <li class="nav-item" @click="ZhuceView">注册</li>
        <li class="nav-item" @click="PersonView">个人中心</li>
        <li class="nav-item" @click="ChatView">汤圆AI</li>
        <li class="nav-item">更多</li>
      </ul>
    </nav>
    <div class="box-container1">
      <div class="box1">
        <div class="box1a">个人基础信息区</div>
        <div class="info-wrapper">
          <div class="info-box">
            <div class="info-title">基本资料</div>
            <div class="info-content">
              <p>姓名：王玉彤</p>
              <p>性别：女</p>
              <p>年龄：19岁</p>
              <p>联系方式：18723745291</p>
            </div>
          </div>
          <div class="info-box">
            <div class="info-title">志愿者身份信息</div>
            <div class="info-content">
              <p>志愿者编号：ZY20230001</p>
              <p>注册时间：2018-12-15</p>
              <p>服务时长：620小时</p>
              <p>认证状态：已认证</p>
            </div>
          </div>
          <div class="info-box">
            <div class="info-title">资质与技能</div>
            <div class="info-content">
              <p>技能：急救培训证书</p>
              <p>资质：英语四级</p>
              <p>特长：舞蹈、摄影、文案撰写</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box-container2">
      <div class="box2">
        <div class="box1b">服务记录与统计区</div>
        <div class="info-wrapper">
          <div class="info-box">
            <div class="info-title">服务总览</div>
            <div class="info-content">
              <p>累计服务时长：620小时</p>
              <p>参与活动总数：99+</p>
              <p>服务人次：5000+</p>
            </div>
          </div>
          <div class="info-box">
            <div class="info-title">详细服务记录</div>
            <div class="info-content">
              <p>活动名称:WTT</p>
              <p>服务时间:2025-07-12</p>
              <p>服务时长:40小时</p>
            </div>
          </div>
          <div class="info-box">
            <div class="info-title">数据统计</div>
            <div class="info-content">
              <p>周时长统计：20小时</p>
              <p>月时长统计：80小时</p>
              <p>年时长统计：160小时</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="back-top" @click="backToTop">TOP<br />显示</div>
  </div>
</template>

<script>
export default {
  name: "BlueLayoutPage",
  methods: {
    backToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    TeamView() {
      this.$router.push("/TeamView");
    },
    LoginView() {
      this.$router.push("/LoginView");
    },
    ChatView() {
      this.$router.push("/ChatView");
    },
    ZhuceView() {
      this.$router.push("/ZhuceView");
    },
    ProgramView() {
      this.$router.push("/ProgramView");
    },
    PersonView() {
      this.$router.push("/PersonView");
    },
    HomePage() {
      this.$router.push("/HomePage");
    },
  },
};
</script>

<style scoped>
.homepage {
  font-family: Arial, sans-serif;
  background-color: #eaf5fc;
  color: #333;
}
.top-banner {
  position: relative;
  width: 100%;
}
.banner-bg {
  width: 100%;
  height: 150px;
  display: block;
  object-fit: cover;
}
.banner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  box-sizing: border-box;
}
.logo-container {
  display: flex;
  align-items: center;
}
.logo {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  border-radius: 100px;
}
.site-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  width: 40%;
  max-width: 500px;
}
.search-type {
  padding: 6px 10px;
  border: none;
  background-color: #f0f8ff;
}
.search-input {
  padding: 6px 10px;
  border: none;
  outline: none;
  flex: 1;
}
.search-btn {
  padding: 6px 20px;
  border: none;
  background-color: #4682b4;
  color: #fff;
  cursor: pointer;
}
.main-nav {
  background-color: #4682b4;
  width: 100%;
}
.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-item {
  padding: 10px 20px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.nav-item:hover {
  background-color: #1e3a5f;
}
.content {
  width: 90%;
  margin: 20px auto;
}
.headline {
  margin-bottom: 20px;
}
.headline-tag {
  background-color: rgb(182 11 39 / 99%);
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 10px;
}
.headline-title {
  margin: 0;
  font-size: 24px;
}

.img-box {
  width: 48%;
}
.img-box img {
  width: 100%;
  height: auto;
  display: block;
}
.img-desc {
  text-align: center;
  margin-top: 10px;
}
.item-text {
  flex: 1;
}
.item-date {
  color: #999;
}
.back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #4682b4;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}
.box-container1 {
  width: 90%;
  height: 300px;
  margin: 30px auto;
}
.box-container2 {
  width: 90%;
  height: 400px;
  margin: 30px auto;
}
.box1 {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-top: 2px solid #4682b4;
  height: 100%;
}
.box2 {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-top: 2px solid #4682b4;
}
.box1a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
  margin: 2px 0;
}
.box1b {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
}
.info-wrapper {
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 20px;
}
.info-box {
  flex: 1;
  border-radius: 6px;
  padding: 15px;
  background-color: #f9f9f9;
}
.info-title {
  font-weight: bold;
  color: #4682b4;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #4682b4;
}
.info-content {
  font-size: 14px;
  color: #333;
}
</style>
